<template>
	<view class="home">
		<!-- 顶部 -->
		<headers :colors="colors" :locations="locations" :swiperList="swiperList"></headers>
		<!-- 公告 -->
		<notice :colors="colors" :noticeList="noticeList"></notice>
		<!-- <hotstitle :colors="colors" title="便民服务" desc="与优质商家合作，确保服务安全可靠" icon="service">
		</hotstitle> -->
		<!-- <classList :categoryList="serviceList"></classList> -->
		<hotstitle :colors="colors" title="极速购物" desc="下单秒送，货到付款，体验优质消费" icon="shoping"></hotstitle>
		<classList :categoryList="categoryList"></classList>
		<!-- 栏目 -->
		<!-- <column></column> -->
		<!-- 广告图 -->
	<!-- 	<banner></banner> -->
		<!-- 热门标题 -->
		<view class="recommend-title">
			<text class="p1">为您精选</text>
			<text class="p2">库存有限,手慢无</text>
		</view>
		<!-- 推荐商品列表 -->
		<recommend :colors="colors" :dataList="goodsList" :loading="loading" bottoms="100"></recommend>
		<!-- 右侧悬浮菜单栏 -->
		<suspension :scrollShow="scrollShow" :colors="colors"></suspension>
		<uni-popup id="noticePopup" ref="noticePopup" type="dialog">
			<uni-popup-dialog type="success" title="提示" content="为更好的促进您的用户体验，我们会在您的使用过程成推送消息" @confirm="requestNotice" @close="rejectNotice"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	var app = getApp();
	import headers from '../../commponent/home/header';
	import classList from '../../commponent/home/classList';
	import notice from '../../commponent/home/notice';
	import column from '../../commponent/home/column';
	import banner from '../../commponent/home/banner';
	import hotstitle from '../../commponent/home/hotstitle';
	import recommend from '../../commponent/home/recommend';
	import suspension from '../../commponent/home/suspension';
	import goodsApi from '@/api/goods.js'
	import communityApi from '@/api/community.js'
	import userApi from '@/api/user.js'
	import {
		getlocation,setAddress
	} from '@/utils/auth.js'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
		data() {
			return {
				colors: '',
				scrollShow: false, //是否显示悬浮菜单
				communityData: {},
				serviceList: [
					{
						code: '',
						name: '家庭保洁',
						icon: 'service/JIA_TING_BAO_JIE.png'
					},{
						code: '',
						name: '家庭护理',
						icon: 'service/JIA_TING_HU_LI.png'
					},{
						code: '',
						name: '母婴护理',
						icon: 'service/MU_YING_HU_LI.png'
					},{
						code: '',
						name: '幼儿托管',
						icon: 'service/YOU_ER_TUO_GUAN.png'
					},{
						code: '',
						name: '宠物托管',
						icon: 'service/CHONG_WU_TUO_GUAN.png'
					},{
						code: '',
						name: '旧物回收',
						icon: 'service/JIU_WU_HUI_SHOU.png'
					},{
						code: '',
						name: '邻友圈子',
						icon: 'service/LIN_YOU_QUAN_ZI.png'
					},{
						code: '',
						name: '小区动态',
						icon: 'service/XIAO_QU_DONG_TAI.png'
					}
				],
				categoryList: [],
				// 商品列表
				goodsList: [],
				locations: {

				},
				loading: true,
				swiperList: [{
					img: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=339984553,3509384023&fm=26&gp=0.jpg'
				}, {
					img: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1786439814,215205363&fm=26&gp=0.jpg'
				}, {
					img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600399666309&di=3670afbef52571b71b98f4562043498e&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F8%2F57ea3c2d57be6.jpg'
				}],
				noticeList: [{
						id: 1,
						title: '甜品港湾,恬美生活'
					},
					{
						id: 2,
						title: '将来有太多未知的甜等待你去尝试'
					}
				]
			};
		},
		components: {
			headers,
			classList,
			notice,
			column,
			banner,
			hotstitle,
			recommend,
			suspension,
			uniPopupMessage,
			uniPopupDialog
		},
		mounted() {
			const self = this;
			// #ifdef MP-WEIXIN
			wx.getSetting({
				withSubscriptions: true,
				success(res) {
					const itemSettings = res.subscriptionsSetting.itemSettings;
					if (itemSettings && Object.keys(itemSettings).length === 3) {
						console.log('已开启订阅消息');
					} else {
						self.$refs.noticePopup.open();
					}
				}
			})
			// #endif
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			this.setData({
				colors: app.globalData.newColor
			});
			uni.setNavigationBarColor({ //设置标题栏颜色
				backgroundColor: app.globalData.newColor,
				frontColor: '#ffffff'
			});
			// #ifdef H5
			let locations = getlocation() //获取位置信息
			if (locations) {
				this.locations = locations
			}
			// #endif
			this.initData();
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			if (this.goodsList.length >= 30) { //模拟上拉加载数据
				this.loading = false
				return
			}
			let data = this.goodsList;
			setTimeout(() => {
				this.loading = true
				this.goodsList.push(...data);
			}, 500)
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {
			return this.getShareContent();
		},
		/**
		 * 用户点击右上角分享到朋友圈
		 */
		onShareTimeline: function(){
			return this.getShareContent();
		},
		methods: {
			getShareContent() {
				return {
					title: '90号英坤便利店',
					path: 'pages/views/tabBar/home'
				}
			},
			initData() {
				this.initGoodsData();
				this.initCommunity();
				this.initClassify();
			},
			requestNotice() {
				this.requestSubscribe();
			},
			rejectNotice() {
				
			},
			requestSubscribe(){
				const that = this;
				wx.requestSubscribeMessage({
			        tmplIds:  [
						'_Sl-wg5wCKzltihYpabIRFfqyaVWonMttvtH20HdjDg',
				'ApY6fDiqERk_ihtSFHye47ZbMhOQ7iNnksGx2GbUVGw',
				'YrZg2UV6IqgSMJiDPjKSNYzMHE4lSOIYmTcLl4JEiZo'],
			        success :(res)=>{
			          console.log("订阅消息 成功 "+res);
			         },
			        fail :(errCode,errMessage) =>{ 
			          console.log(errCode);
			        },
			        complete:(errMsg)=>{
			          that.$refs.noticePopup.close();
			        }
			      });
			},
			initClassify() {
				goodsApi.getClassify().then(res => {
					this.categoryList = res.data.data.splice(0, 8);
				})
			},
			initCommunity() {
				communityApi.get().then(res => {
					this.communityData = res.data.data;
					uni.setStorage({
						key: 'c_merchant',
						data: this.communityData
					})
					uni.setStorage({
						key: 'merchantId',
						data: this.communityData.merchantId
					})
					this.noticeList = this.communityData.merchant.notice;
				});
			},
			async initGoodsData() {
				const res = await goodsApi.find();
				this.goodsList = res.data.data;
			},
			onPageScroll: function(e) {
				if (e.scrollTop >= 500) {
					this.setData({
						scrollShow: true
					});
				} else {
					this.setData({
						scrollShow: false
					});
				}
			}
		}
	};
</script>
<style scoped lang="scss">
	.home {
		margin-bottom: 40rpx;
	}
	.recommend-title{
		padding: 10px 0px;
		text-align: center;
		.p1{
			font-size: 16px;
			font-weight: 700;
			color: #000
		}
		.p2{
			font-size: 12px;
			color: #999;
			margin-left: 5px;
		}
	}
</style>
